<template>
	 <el-input v-model="value">
		<template #append>
			<el-button @click="toOpen">选择</el-button>
		</template>
	 </el-input>
 	 <mdp-dialog ref="dialog"> 
			<template #default="{dialog}">
				<mdp-table subOpType="select" :multiple="multiple" :operWidth="120" :pageable="false"  :columnCfgs="columnCfgs" :crudApis="crudApis" @select="(d)=>onTableSelect(d)" :preQueryCheck="preQueryCheck">
					<template #query="{page}">
						<el-space wrap class="padding-bottom">
							<el-input v-model="page.filters.tableName" placeholder="表名"/>
							<mdp-select-data-source v-model="page.filters.dataSource" @change="(val)=>$emit('dataSourceChange',val)"/> <el-button  type="primary" @click="page.searchTableDatas()" icon="search">查询</el-button>
							<el-button v-if="multiple" :disabled="page.sels.length==0" @click="()=>{page.selectListConfirm();dialog.close();}" type="primary">确认选择</el-button>
						</el-space>
					</template>
				</mdp-table>
			</template>
		
	 </mdp-dialog>
</template> 
<script> 
import {getTableList} from '@/api/mdp/dm/meta'
export default {
	name: 'MdpInputTableName', 
	props: {
		modelValue: {
			type:[String,Array,Object],
			default:function(){
				return null
			}
		},
		multiple:{
			type: Boolean,
			default: false
		}
	},
	data(){
		return {  
			columnCfgs:[
				{label:'表编号',property:'tableName'},
				{label:'表描述',property:'tableRemarks'}
			],
			crudApis:{
				list:getTableList
			}
		}
	},
	computed: {
		value:{
			set(val){
				this.$emit('update:modelValue',val)
			},
			get(){
				return this.modelValue
			}
		}
	}, 
	methods:{ 
		onTableSelect(sels){
			if(this.multiple==true){
				this.value=sels.map(k=>k.tableName).join(",")
			}else{
				this.value=sels.tableName
			} 
		},
		preQueryCheck(page){
			if(!page.filters.dataSource){
				this.$message({message:'数据源不能为空'})
				return false
			}else{
				return true;
			}
		},
		toOpen(){  
			this.$refs['dialog'].open({})
		}
	},
	mounted() { 
		 
	}
}
</script>
